<template>
  <div class="mypanel">
    <el-dialog title="新增员工" :visible="dialogShow">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.timeOfEntry"></el-date-picker>
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select v-model="form.formOfEmployment" placeholder="请选择">
            <el-option v-for="(item, index) in hireType" :key="index" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input v-model="form.workNumber"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <div class="deptBox">
            <el-input v-model="form.departmentName" @focus="toggerTree"></el-input>
            <el-tree
              @node-click="nodeClick"
              :props="{ label: 'name' }"
              v-if="treeShow"
              :data="depList"
              default-expand-all
              class="mytree"
            ></el-tree>
          </div>
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.correctionTime"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="cancle">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myemployees from '@/api/constant/employees'
import { getDeptListApi } from '@/api/departments'
import { addEmpApi } from '@/api/employees'
export default {
  props: ['dialogShow'],
  data() {
    return {
      form: {
        username: '',
        mobile: '',
        timeOfEntry: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        correctionTime: ''
      },
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              reg.test(value) ? callback() : callback('手机号不合法')
            }
          }
        ],
        timeOfEntry: [{ required: true, message: '入职时间不能为空', trigger: 'blur' }],
        formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],
        workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
        departmentName: [{ required: true, message: '部门名称不能为空', trigger: 'change' }],
        correctionTime: [{ required: true, message: '转正时间不能为空', trigger: 'blur' }]
      },
      // 得到聘用的枚举
      hireType: myemployees.hireType,
      // 部门数据
      depList: [{ label: 'a', children: [{ label: 'b' }] }],
      // 树状结构显示隐藏
      treeShow: false
    }
  },
  methods: {
    // 新增数据提交
    submit() {
      this.$refs.form.validate(async res => {
        if (res) {
          await addEmpApi(this.form)
          this.$emit('update:dialogShow', false)
          ;(this.form = {
            username: '',
            mobile: '',
            timeOfEntry: '',
            formOfEmployment: '',
            workNumber: '',
            departmentName: '',
            correctionTime: ''
          }),
            this.$refs.form.resetFields()
          this.$message.success('新增成功')
          this.$emit('updateDate')
        } else {
          console.log('验证不通过')
        }
      })
    },
    // 得到部门数据
    async getDeptList() {
      const res = await getDeptListApi()
      this.depList = this.trunData(res.data.data.depts, '')
    },
    // 将部门数据转化为嵌套关系
    trunData(arr, pid) {
      var result = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const children = this.trunData(arr, item.id)
          item.children = children
          result.push(item)
        }
      })
      return result
    },
    // el-tree单击元素触发
    nodeClick(data) {
      this.form.departmentName = data.name
      this.treeShow = false
    },
    // 点击部门输入框触发
    toggerTree() {
      this.treeShow = true
    },
    cancle() {
      this.treeShow = false
      // 关闭面板
      this.$emit('update:dialogShow', false)
      // 清空数据
      ;(this.form = {
        username: '',
        mobile: '',
        timeOfEntry: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        correctionTime: ''
      }),
        // 重置校验规则
        this.$refs.form.resetFields()
    }
  },
  created() {
    this.getDeptList()
  }
}
</script>

<style lang="scss">
.mypanel {
  .deptBox {
    width: 300px;
    position: relative;
    .el-tree.mytree {
      overflow: auto;
      height: 180px;
    }
    .mytree {
      border: 1px solid #ccc;
      border-radius: 6px;
      position: absolute;
      width: 100%;
      z-index: 999;
    }
  }
}
</style>
